
            <section class="row">
                <div class="col-12">
                    <div>
                        <h1>Basic Form Elements</h1>
                    </div>
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                            <li>Forms</li>
                            <li class="active">Basic Form Elements</li>
                        </ol>
                    </div>
                </div>
            </section>
            
            <div class="ajax-container">
                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Basic Form Validations</h3>
                            </div>
                            <div class="panel-body form-container">
                                <form id="basic-validation" method="post" action="<?= base_url() ?>forms/validate" class="form-bordered form-horizontal form-validate">
                                    <fieldset>
                                        <legend>Basic Form Validations</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="geolocation_map" class="control-label col-3">
                                                    Plot Geolocation *
                                                    <br><small>(plot geolocation)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div id="geolocation_map" style="width:100%; height:300px;"></div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="geolocation" class="control-label col-3">
                                                    Geolocation *
                                                    <br><small>(geolocation)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <input type="text" name="geolocation" id="geolocation" class="form-control" placeholder="Geolocation">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="geolocation_longitude" class="control-label col-3">
                                                    Geolocation Longitude *
                                                    <br><small>(longitude)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>
                                                            <input type="text" name="geolocation_longitude" id="geolocation_longitude" class="form-control" placeholder="120.61758366806225">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="geolocation_latitude" class="control-label col-3">
                                                    Geolocation Latitude *
                                                    <br><small>(latitude)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>
                                                            <input type="text" name="geolocation_latitude" id="geolocation_latitude" class="form-control" placeholder="16.413640135538014">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <script>
                                                $(function() {
                                                    initialize_map('geolocation', '120.61758366806225', '16.413640135538014');
                                                });
                                            </script>
                                            
                                            <li class="form-group row">
                                                <label for="text-validation" class="control-label col-3">
                                                    Text*<br>
                                                    <small>(alphanumeric characters)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                            <input type="text" name="text" id="text-validation" class="form-control" placeholder="generic text">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="numeric-validation" class="control-label col-3">
                                                    Numeric*<br>
                                                    <small>(integer)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                            <input type="text" name="numeric" id="numeric-validation" class="form-control" placeholder="0">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="email-validation" class="control-label col-3">
                                                    Email*<br>
                                                    <small>(sample_email@domain.com)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                                            <input type="text" name="email" id="email-validation" class="form-control" placeholder="markangeloangulo@gmail.com">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="url-validation" class="control-label col-3">
                                                    URL*<br>
                                                    <small>(http://some_domain.com)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <input type="text" name="url" id="url-validation" class="form-control" placeholder="http://google.com">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="password-validation" class="control-label col-3">
                                                    Password*<br>
                                                    <small>(password)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                                            <input type="password" name="password" id="password-validation" class="form-control" placeholder="s4mplep4ssw0rd">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="confirm-password-validation" class="control-label col-3">
                                                    Confirm Password*<br>
                                                    <small>(type password again)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                                            <input type="password" name="confirm-password" id="confirm-password-validation" class="form-control" placeholder="s4mplep4ssw0rd">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="radio-inline-validation" class="control-label col-3">
                                                    Radio Buttons*<br>
                                                    <small>(inline)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="radio radio-inline">
                                                            <label class="control-label"><input type="radio" name="radio-inline-validation" value="male" checked="">Male</label>
                                                        </div>
                                                        <div class="radio radio-inline">
                                                            <label class="control-label"><input type="radio" name="radio-inline-validation" value="female">Female</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="checkbox-inline-validation" class="control-label col-3">
                                                    Check Boxes*<br>
                                                    <small>(inline)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="checkbox checkbox-inline">
                                                            <label class="control-label"><input type="checkbox" name="checkbox-inline-validation" value="red">Red</label>
                                                        </div>
                                                        <div class="checkbox checkbox-inline">
                                                            <label class="control-label"><input type="checkbox" name="checkbox-inline-validation" value="green">Green</label>
                                                        </div>
                                                        <div class="checkbox checkbox-inline">
                                                            <label class="control-label"><input type="checkbox" name="checkbox-inline-validation" value="blue">Blue</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="dropdown-validation" class="control-label col-3">
                                                    Dropdown*<br>
                                                    <small>(item select)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <select name="dropdown" id="dropdown-validation" class="form-control">
                                                                <option value="" selected="selected"> - Select Timezone - </option>
                                                                <option value="UM12">(UTC -12:00) Baker/Howland Island</option>
                                                                <option value="UM11">(UTC -11:00) Samoa Time Zone, Niue</option>
                                                                <option value="UM10">(UTC -10:00) Hawaii-Aleutian Standard Time, Cook Islands, Tahiti</option>
                                                                <option value="UM95">(UTC -9:30) Marquesas Islands</option>
                                                                <option value="UM9">(UTC -9:00) Alaska Standard Time, Gambier Islands</option>
                                                                <option value="UM8">(UTC -8:00) Pacific Standard Time, Clipperton Island</option>
                                                                <option value="UM7">(UTC -7:00) Mountain Standard Time</option>
                                                                <option value="UM6">(UTC -6:00) Central Standard Time</option>
                                                                <option value="UM5">(UTC -5:00) Eastern Standard Time, Western Caribbean Standard Time</option>
                                                                <option value="UM45">(UTC -4:30) Venezuelan Standard Time</option>
                                                                <option value="UM4">(UTC -4:00) Atlantic Standard Time, Eastern Caribbean Standard Time</option>
                                                                <option value="UM35">(UTC -3:30) Newfoundland Standard Time</option>
                                                                <option value="UM3">(UTC -3:00) Argentina, Brazil, French Guiana, Uruguay</option>
                                                                <option value="UM2">(UTC -2:00) South Georgia/South Sandwich Islands</option>
                                                                <option value="UM1">(UTC -1:00) Azores, Cape Verde Islands</option>
                                                                <option value="UTC">(UTC) Greenwich Mean Time, Western European Time</option>
                                                                <option value="UP1">(UTC +1:00) Central European Time, West Africa Time</option>
                                                                <option value="UP2">(UTC +2:00) Central Africa Time, Eastern European Time, Kaliningrad Time</option>
                                                                <option value="UP3">(UTC +3:00) Moscow Time, East Africa Time</option>
                                                                <option value="UP35">(UTC +3:30) Iran Standard Time</option>
                                                                <option value="UP4">(UTC +4:00) Azerbaijan Standard Time, Samara Time</option>
                                                                <option value="UP45">(UTC +4:30) Afghanistan</option>
                                                                <option value="UP5">(UTC +5:00) Pakistan Standard Time, Yekaterinburg Time</option>
                                                                <option value="UP55">(UTC +5:30) Indian Standard Time, Sri Lanka Time</option>
                                                                <option value="UP575">(UTC +5:45) Nepal Time</option>
                                                                <option value="UP6">(UTC +6:00) Bangladesh Standard Time, Bhutan Time, Omsk Time</option>
                                                                <option value="UP65">(UTC +6:30) Cocos Islands, Myanmar</option>
                                                                <option value="UP7">(UTC +7:00) Krasnoyarsk Time, Cambodia, Laos, Thailand, Vietnam</option>
                                                                <option value="UP8">(UTC +8:00) Australian Western Standard Time, Beijing Time, Irkutsk Time</option>
                                                                <option value="UP875">(UTC +8:45) Australian Central Western Standard Time</option>
                                                                <option value="UP9">(UTC +9:00) Japan Standard Time, Korea Standard Time, Yakutsk Time</option>
                                                                <option value="UP95">(UTC +9:30) Australian Central Standard Time</option>
                                                                <option value="UP10">(UTC +10:00) Australian Eastern Standard Time, Vladivostok Time</option>
                                                                <option value="UP105">(UTC +10:30) Lord Howe Island</option>
                                                                <option value="UP11">(UTC +11:00) Magadan Time, Solomon Islands, Vanuatu</option>
                                                                <option value="UP115">(UTC +11:30) Norfolk Island</option>
                                                                <option value="UP12">(UTC +12:00) Fiji, Gilbert Islands, Kamchatka Time, New Zealand Standard Time</option>
                                                                <option value="UP1275">(UTC +12:45) Chatham Islands Standard Time</option>
                                                                <option value="UP13">(UTC +13:00) Phoenix Islands Time, Tonga</option>
                                                                <option value="UP14">(UTC +14:00) Line Islands</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="text-area-validation" class="control-label col-3">
                                                    Textarea<br>
                                                    <small>(long text)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <textarea name="text-area" id="text-area-validation" class="form-control" placeholder="long text goes here..."></textarea>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    <div class="submit-group col-12 align-right">
                                        <input name="submit" class="btn btn-primary" value="Submit" type="submit">
                                        <input name="cancel" class="btn btn-default" value="Cancel" type="button">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Basic Form Elements</h3>
                            </div>
                            <div class="panel-body form-container">
                                <form method="post" action="" class="form-bordered form-horizontal">
                                    <fieldset>
                                        <legend>Basic Form Elements</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="text" class="control-label col-3">
                                                    Text<br>
                                                    <small>(alphanumeric characters)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                            <input type="text" name="text" id="text" class="form-control" placeholder="generic text">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="numeric" class="control-label col-3">
                                                    Numeric<br>
                                                    <small>(integer)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-edit"></i></span>
                                                            <input type="text" name="numeric" id="numeric" class="form-control" placeholder="0">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="email" class="control-label col-3">
                                                    Email<br>
                                                    <small>(sample_email@domain.com)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                                            <input type="text" name="email" id="email" class="form-control" placeholder="markangeloangulo@gmail.com">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="url" class="control-label col-3">
                                                    URL<br>
                                                    <small>(http://some_domain.com)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <input type="text" name="url" id="url" class="form-control" placeholder="http://google.com">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="password" class="control-label col-3">
                                                    Password<br>
                                                    <small>(password)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                                            <input type="password" name="password" id="password" class="form-control" placeholder="s4mplep4ssw0rd">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="radio-block" class="control-label col-3">
                                                    Radio Buttons<br>
                                                    <small>(block)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="radio">
                                                            <label class="control-label"><input type="radio" name="radio-block" value="male" checked="checked">Male</label>
                                                        </div>
                                                        <div class="radio">
                                                            <label class="control-label"><input type="radio" name="radio-block" value="female">Female</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="radio-inline" class="control-label col-3">
                                                    Radio Buttons<br>
                                                    <small>(inline)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="radio radio-inline">
                                                            <label class="control-label"><input type="radio" name="radio-inline" value="male" checked="">Male</label>
                                                        </div>
                                                        <div class="radio radio-inline">
                                                            <label class="control-label"><input type="radio" name="radio-inline" value="female">Female</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="checkbox-block" class="control-label col-3">
                                                    Check Boxes<br>
                                                    <small>(block)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="checkbox">
                                                            <label class="control-label"><input type="checkbox" name="checkbox-block" value="red">Red</label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label class="control-label"><input type="checkbox" name="checkbox-block" value="green">Green</label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label class="control-label"><input type="checkbox" name="checkbox-block" value="blue">Blue</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="checkbox-inline" class="control-label col-3">
                                                    Check Boxes<br>
                                                    <small>(inline)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="checkbox checkbox-inline">
                                                            <label class="control-label"><input type="checkbox" name="checkbox-inline" value="red">Red</label>
                                                        </div>
                                                        <div class="checkbox checkbox-inline">
                                                            <label class="control-label"><input type="checkbox" name="checkbox-inline" value="green">Green</label>
                                                        </div>
                                                        <div class="checkbox checkbox-inline">
                                                            <label class="control-label"><input type="checkbox" name="checkbox-inline" value="blue">Blue</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="dropdown" class="control-label col-3">
                                                    Dropdown<br>
                                                    <small>(item select)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <select name="dropdown" id="dropdown" class="form-control">
                                                                <option value="" selected="selected"> - Select Timezone - </option>
                                                                <option value="UM12">(UTC -12:00) Baker/Howland Island</option>
                                                                <option value="UM11">(UTC -11:00) Samoa Time Zone, Niue</option>
                                                                <option value="UM10">(UTC -10:00) Hawaii-Aleutian Standard Time, Cook Islands, Tahiti</option>
                                                                <option value="UM95">(UTC -9:30) Marquesas Islands</option>
                                                                <option value="UM9">(UTC -9:00) Alaska Standard Time, Gambier Islands</option>
                                                                <option value="UM8">(UTC -8:00) Pacific Standard Time, Clipperton Island</option>
                                                                <option value="UM7">(UTC -7:00) Mountain Standard Time</option>
                                                                <option value="UM6">(UTC -6:00) Central Standard Time</option>
                                                                <option value="UM5">(UTC -5:00) Eastern Standard Time, Western Caribbean Standard Time</option>
                                                                <option value="UM45">(UTC -4:30) Venezuelan Standard Time</option>
                                                                <option value="UM4">(UTC -4:00) Atlantic Standard Time, Eastern Caribbean Standard Time</option>
                                                                <option value="UM35">(UTC -3:30) Newfoundland Standard Time</option>
                                                                <option value="UM3">(UTC -3:00) Argentina, Brazil, French Guiana, Uruguay</option>
                                                                <option value="UM2">(UTC -2:00) South Georgia/South Sandwich Islands</option>
                                                                <option value="UM1">(UTC -1:00) Azores, Cape Verde Islands</option>
                                                                <option value="UTC">(UTC) Greenwich Mean Time, Western European Time</option>
                                                                <option value="UP1">(UTC +1:00) Central European Time, West Africa Time</option>
                                                                <option value="UP2">(UTC +2:00) Central Africa Time, Eastern European Time, Kaliningrad Time</option>
                                                                <option value="UP3">(UTC +3:00) Moscow Time, East Africa Time</option>
                                                                <option value="UP35">(UTC +3:30) Iran Standard Time</option>
                                                                <option value="UP4">(UTC +4:00) Azerbaijan Standard Time, Samara Time</option>
                                                                <option value="UP45">(UTC +4:30) Afghanistan</option>
                                                                <option value="UP5">(UTC +5:00) Pakistan Standard Time, Yekaterinburg Time</option>
                                                                <option value="UP55">(UTC +5:30) Indian Standard Time, Sri Lanka Time</option>
                                                                <option value="UP575">(UTC +5:45) Nepal Time</option>
                                                                <option value="UP6">(UTC +6:00) Bangladesh Standard Time, Bhutan Time, Omsk Time</option>
                                                                <option value="UP65">(UTC +6:30) Cocos Islands, Myanmar</option>
                                                                <option value="UP7">(UTC +7:00) Krasnoyarsk Time, Cambodia, Laos, Thailand, Vietnam</option>
                                                                <option value="UP8">(UTC +8:00) Australian Western Standard Time, Beijing Time, Irkutsk Time</option>
                                                                <option value="UP875">(UTC +8:45) Australian Central Western Standard Time</option>
                                                                <option value="UP9">(UTC +9:00) Japan Standard Time, Korea Standard Time, Yakutsk Time</option>
                                                                <option value="UP95">(UTC +9:30) Australian Central Standard Time</option>
                                                                <option value="UP10">(UTC +10:00) Australian Eastern Standard Time, Vladivostok Time</option>
                                                                <option value="UP105">(UTC +10:30) Lord Howe Island</option>
                                                                <option value="UP11">(UTC +11:00) Magadan Time, Solomon Islands, Vanuatu</option>
                                                                <option value="UP115">(UTC +11:30) Norfolk Island</option>
                                                                <option value="UP12">(UTC +12:00) Fiji, Gilbert Islands, Kamchatka Time, New Zealand Standard Time</option>
                                                                <option value="UP1275">(UTC +12:45) Chatham Islands Standard Time</option>
                                                                <option value="UP13">(UTC +13:00) Phoenix Islands Time, Tonga</option>
                                                                <option value="UP14">(UTC +14:00) Line Islands</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="form-group row">
                                                <label for="text-area" class="control-label col-3">
                                                    Textarea<br>
                                                    <small>(long text)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <textarea name="text-area" id="text-area" class="form-control" placeholder="long text goes here..."></textarea>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    <div class="submit-group col-12 align-right">
                                        <input name="submit" class="btn btn-primary" value="Submit" type="submit">
                                        <input name="cancel" class="btn btn-default" value="Cancel" type="button">
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- page-script -->
            <script src="<?= base_url() ?>js/scripts/form-basic.js"></script>